import React from 'react';
import { withStyles, createStyles } from "@material-ui/core/styles";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableFooter from '@material-ui/core/TableFooter';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import $ from 'jquery';
import Grid from "@material-ui/core/Grid";
import EditIcon from "@material-ui/icons/Edit";
import Button from "@material-ui/core/Button";

const useStyles = createStyles({
    table: {
        minWidth: 750,
        maxWidth: 900
    },
});
/**
 * 展示课程信息的表格
 */
class StudentTable extends React.Component {
    constructor(props) {
        super(props);
        /**
         * 参数：URL：数据接口 term：学期 class:班级 usernumber：用户名
         */
        this.state = {
            url: this.props.url,
            term: this.props.term,
            class: this.props.class,
            course: this.props.course,
            usernumber: this.props.usernumber,
            data: [],
            thead: [
                '学号',
                '学生名',
                '平时成绩',
                '实验成绩',
                '卷面成绩',
                '备注'
            ],
            //状态对照表
            status: {
                0: '未录入',
                1: '已录入',
                2: '暂存'
            }
        }
    }

    /**
     * 初始化数据
     */
    componentDidMount() {

        $.ajax({
            type: "POST",
            url: this.state.url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                usernumber:this.state.usernumber,
                tool2:this.state.term,
                tool1:this.state.course,
                tool3:this.state.class//从上一级页面中传递班级参数用以在表头显示
            }),
            dataType: "json",
            success: function (newdata) {
                if (newdata) {
                    this.setState({
                        data:newdata
                    });
                    console.log(newdata);
                }else{

                }
            }.bind(this),
            error: function (message) {
                alert("数据获取失败");
            }
        });
    }
    render() {
        const { classes } = this.props;
        return (
            <TableContainer component={Paper}>
                <h6 style={{"text-align": "center"}}>班级学生列表 课程:{this.state.course} 学期:{this.state.term} 班级:{this.state.class}</h6>
                <Table className={classes.table} aria-label="simple table" style={{"text-align":"center","margin": "auto"}}>
                    {/**表头 */}
                    <TableHead>
                        <TableRow>
                            {this.state.thead.map(
                                (item,index)=>
                                    <TableCell key={index}>{item}</TableCell>
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {this.state.data.map((row) => (
                            <TableRow key={row._id}>
                                <TableCell >{row.studentid}</TableCell>
                                <TableCell >{row.studentname}</TableCell>
                                <TableCell ></TableCell>
                                <TableCell ></TableCell>
                                <TableCell >{row.totalgrade}</TableCell>
                                {/*
                                <TableCell >{row.gradepecents.additionalProp1}</TableCell>
                                <TableCell >{row.gradepecents.additionalProp2}</TableCell>
                                <TableCell >{row.gradepecents.additionalProp3}</TableCell>
                                上述行分别为平时成绩，实验成绩和卷面成绩，下面为备注，接口尚不完善*/}
                                <TableCell >无</TableCell>
                                <TableCell >{this.state.status[row.status]}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                    <TableFooter>
                        <TableRow>
                            <Grid container spacing={1}>
                                <Grid item>
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        className={classes.button}
                                        endIcon={<EditIcon>send</EditIcon>}
                                        //onClick={(e)=>this.handleInputBtnClick(e,index)}
                                    >
                                        打印
                                    </Button>
                                </Grid>
                                <Grid item>
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        className={classes.button}
                                        endIcon={<EditIcon>send</EditIcon>}
                                        //onClick={(e)=>this.handleInputBtnClick(e,index)}
                                    >
                                        撤销
                                    </Button>
                                </Grid>
                                <Grid item>
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        className={classes.button}
                                        endIcon={<EditIcon>send</EditIcon>}
                                        //onClick={(e)=>this.handleInputBtnClick(e,index)}
                                    >
                                        暂存
                                    </Button>
                                </Grid>
                                <Grid item>
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        className={classes.button}
                                        endIcon={<EditIcon>send</EditIcon>}
                                        //onClick={(e)=>this.handleInputBtnClick(e,index)}
                                    >
                                        提交
                                    </Button>
                                </Grid>
                            </Grid>
                        </TableRow>
                    </TableFooter>
                </Table>
            </TableContainer>

        )
    }

}

export default withStyles(useStyles)(StudentTable);